<template>
	<view class="boxContainer">
		<view class="boxItem">
			<view class="boxTitle">
				<view class="titleLeft">
					<view class="titleIcon">
						<image :src="src" mode=""></image>
					</view>
					<view class="title">
						<text>{{title}}</text>
					</view>
				</view>
				<view class="titleRight">
					<view class="titleTag" @click="toJob">
						<text>{{optionName}}</text>
					</view>
				</view>
			</view>
			<slot class="boxMain"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["src", "title", "optionName"],
		name: "commonBox",
		data() {
			return {

			};

		},
		methods: {
			toJob() {
				uni.navigateTo({
					url:"/pages/ischoolQZ/targetJob/targetJob"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boxContainer {
		.boxItem {
			padding: 34rpx;

			.boxTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.titleLeft {
					display: flex;
					align-items: center;
					justify-content: center;

					.titleIcon {
						margin-right: 10rpx;
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 50rpx;
						border-radius: 50%;
						background-color: #C0C0C0;

						image {
							width: 28rpx;
							height: 28rpx;
						}
					}

					.title {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.titleRight {
					.titleTag {
						width: 132rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						border-radius: 30rpx;
						background-color: #8ABB43;

						text {
							color: #FFFFFF;
						}
					}
				}
			}

			.boxMain {
				padding: 20rpx 34rpx;
			}
		}
	}
</style>
